<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<script src="/js/layout.js" type="text/javascript"></script>
<link href="/jquery.pagination/simplePagination.css" rel="stylesheet" type="text/css" />
<script src="/jquery.pagination/jquery.simplePagination.js" type="text/javascript"></script>
<script type="text/javascript">
    function ImageViewModel() {
        var self = this;

        self.imageSrc = ko.observable('');

        var $p = $('#pagination');
        self.selectPath = function () {
            folderBrowser(function (path) {
                jsonrpc.invoke({
                    method: 'files',
                    params: {
                        path: path,
                        type: 1
                    },
                    success: function (data) {
                        var images = [];
                        for (var i in data.result) {
                            var name = data.result[i].name;
                            var index = name.lastIndexOf('.');
                            if (index != -1) {
                                var ext = name.substring(index).toLowerCase();
                                if ($.inArray(ext, ['.jpg', '.png', '.gif']) != -1) {
                                    if (!endsWith(path, '/')) {
                                        path += '/';
                                    }
                                    var filename = encodeURI(path + name);
                                    var src = jsonrpc.uri + '?__cmd__=file&name=' + filename;
                                    images.push(src);
                                }
                            }
                        }
                        if (images.length > 0) {
                            $p.pagination({
                                items: images.length,
                                onPageClick: function (pageNumber, event) {
                                    self.imageSrc(images[pageNumber - 1]);
                                } 
                            });
                            $p.pagination('selectPage', 1);
                        }
                    }
                });
            });
        }
    }

    $(function () {
        ko.applyBindings(new ImageViewModel());
    });
</script>
</head>
<body>
	<div class="center">
		<a href="javascript:void(0);" data-bind="click:selectPath">[Select Path...]</a>
		<div id="pagination" class="pagination"></div>
	</div>
	<div class="center" style="border:1px solid #d5d5d5;">
		<img alt="" data-bind="attr:{src:imageSrc}" style="max-height:800px" />
	</div>
</body>
</html>
